<template>
  <div class="NoticeOfShipment">
    <div class="function">
      <el-row :gutter="10">
        <el-col :span="2.2">
          <el-button type="primary" @click="add">
            <img src="../../../assets/img/add.png" class="iconw">
            新增发货通知单
          </el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="changeHis">
            <img src="../../../assets/img/cx2.png" class="iconw">
            历史发货通知单查询
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-carousel height="72vh" :initial-index='0' :autoplay="false" indicator-position="none" arrow="never" ref="swip">
      <el-carousel-item>
        <div class="from">
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="客户编号：" prop="fOrgCategory">
                  <el-select @change="fillCustomer" style="width: 100%" filterable
                             v-model="from.tableHead.salesOrderHead.fCustomerCode">
                    <el-option v-for="item in data.allUserList" :key="item.code" :label="item.code"
                               :value="item.code +'_'+item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客户名称：" prop="fOrgCategory">
                  <!--                  <el-input placeholder="自动填充" disabled v-model="from.tableHead.salesOrderHead.fCustomerName"/>-->
                  <el-select @change="fillCustomerName" style="width: 100%" filterable
                             v-model="from.tableHead.salesOrderHead.fCustomerName">
                    <el-option v-for="item in data.allUserList" :key="item.code" :label="item.name"
                               :value="item.code +'_'+item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="收货方：" prop="fOrgCategory">
                  <el-input v-model="from.tableHead.salesOrderHead.fReceive"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label=" 经  办 人 ： " prop="fOrgCategory">
                  <el-input placeholder="请输入经办人" v-model="from.tableHead.salesOrderHead.fHandlerName"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="经办人电话：" prop="fOrgCategory">
                  <el-input placeholder="请输入经办人电话" v-model="from.tableHead.salesOrderHead.fHandlerPhone"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发 货 日 期 ：" prop="fOrgCategory">
                  <el-date-picker type="datetime"
                                  v-model="from.tableHead.salesOrderHead.fSendDate"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--            <el-row :gutter="10">-->
            <!--              <el-col :span="6">-->
            <!--                <el-form-item label="物流单号：" prop="fOrgCategory">-->
            <!--                  <el-input placeholder="请输入物流单号" v-model="from.tableHead.salesOrderHead.fLogisticsCode"/>-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--              <el-col :span="6">-->
            <!--                <el-form-item label="物流公司名称：" prop="fOrgCategory">-->
            <!--                  <el-input placeholder="请输入物流公司名称" v-model="from.tableHead.salesOrderHead.fLogisticsName"/>-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--              <el-col :span="6">-->
            <!--                <el-form-item label="发货物流：" prop="fOrgCategory">-->
            <!--                  <el-input placeholder="请输入发货物流" v-model="from.tableHead.salesOrderHead.fSendLogistics"/>-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="发 货 类 型 ：" prop="fFulfillmentType">
                  <el-input
                      v-model="from.tableHead.salesOrderHead.fFulfillmentType"
                      placeholder="请输入发货类型"
                      clearable
                  />
                  <!--                  <el-select-->
                  <!--                      placeholder="请选择发货类型"-->
                  <!--                      v-model="from.tableHead.salesOrderHead.fFulfillmentType">-->
                  <!--                    <el-option v-for="item in data.deliveryTyp"-->
                  <!--                               :key="item" :label="item"-->
                  <!--                               :value="item"></el-option>-->
                  <!--                  </el-select>-->
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="发货地址：" prop="fOrgCategory">
                  <el-input placeholder="请输入发货地址" v-model="from.tableHead.salesOrderHead.fSendAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="收货地址：" prop="fOrgCategory">
                  <el-input placeholder="请输入收货地址" v-model="from.tableHead.salesOrderHead.fReceiveAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" plain @click="confirmOrder">
                  确认通知单
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="table" id="zhantie">
          <div class="info">
            <el-row :gutter="10">
              <el-upload
                  ref="uploadRef"
                  action="#"
                  :limit="1"
                  :http-request="handleHttpUpload"
              >
                <template #trigger>
                  <el-button type="primary">选择文件</el-button>
                </template>
              </el-upload>
              <el-button style="margin-left: 5px" type="success" @click="from.tableHead.salesOrderVos.push({})">
                +
              </el-button>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-table height="350" :data="from.tableHead.salesOrderVos" border style="width: 100%">
                  <el-table-column v-if="false" prop="fOrderNumber" label="领充单号" #default="scope">
                    <el-input v-model="scope.row['fOrderNumber']"></el-input>
                  </el-table-column>
                  <el-table-column prop="Sort" label="序号"/>
                  <el-table-column prop="fElectronFlow" label="电子流" #default="scope">
                    <el-input v-model="scope.row['fElectronFlow']"></el-input>
                  </el-table-column>
                  <el-table-column prop="fContractNumber" label="合同号" #default="scope">
                    <el-input v-model="scope.row['fContractNumber']"></el-input>
                  </el-table-column>
                  <el-table-column prop="fCustomerCode" label="客户编码" #default="scope">
                    <el-input v-model="scope.row.fCustomerCode" clearable/>
                    <!--                    <el-select style="width: 100%" filterable v-model="scope.row.fCustomerCode">-->
                    <!--                      <el-option v-for="item in data.allUserList" :key="item.code" :label="item.code"-->
                    <!--                                 :value="item.code"></el-option>-->
                    <!--                    </el-select>-->
                  </el-table-column>
                  <el-table-column prop="fInvCode" label="正能编码" #default="scope">
                    <el-input v-model="scope.row.fInvCode" @keyup.enter="SM_wlbh(scope)"></el-input>
                  </el-table-column>
                  <el-table-column prop="fInvName" label="物料名称"/>
                  <el-table-column prop="fInvStd" label="	物料规格"/>
                  <el-table-column v-if="false" prop="fScanNum" label="已扫描数"/>
                  <el-table-column label="本次发货数" #default="scope">
                    <el-input v-model="from.tableHead.salesOrderVos[scope.$index].fSendNum"></el-input>
                  </el-table-column>
                  <el-table-column prop="fUnit" label="单位" #default="scope">
                    <el-input v-model="scope.row['fUnit']" clearable/>
                    <!--                    <el-select v-model="scope.row['fUnit']">-->
                    <!--                      <el-option v-for="item in data.unitType"-->
                    <!--                                 :key="item" :label="item"-->
                    <!--                                 :value="item"></el-option>-->
                    <!--                    </el-select>-->
                  </el-table-column>
                  <el-table-column prop="fLogistics" label="物流方式" #default="scope">
                    <el-input v-model="scope.row['fLogistics']"></el-input>
                  </el-table-column>
                  <el-table-column prop="fProjectName" label="项目名称" #default="scope">
                    <el-input v-model="scope.row['fProjectName']"></el-input>
                  </el-table-column>
                  <el-table-column prop="fRemark" label="备注" #default="scope">
                    <el-input v-model="scope.row.fRemark" placeholder="请输入备注信息"></el-input>
                  </el-table-column>
                  <el-table-column prop="fSendNotice" label="发货通知人" #default="scope">
                    <el-input v-model="scope.row['fSendNotice']"></el-input>
                  </el-table-column>
                  <el-table-column prop="fAccountProcessing" label="账务处理" #default="scope">
                    <el-input v-model="scope.row['fAccountProcessing']"></el-input>
                  </el-table-column>
                  <el-table-column v-if="false" prop="fPacking" label="包装方式" #default="scope">
                    <el-select v-model="scope.row['fPacking']">
                      <el-option v-for="item in data.packageType"
                                 :key="item" :label="item"
                                 :value="item"></el-option>
                    </el-select>
                  </el-table-column>
                  <el-table-column label="操作" #default="scope" width="100">
                    <el-button type="danger" @click="delt(scope)">删除</el-button>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col v-if="false" :span="1">
                <el-button type="primary" plain @click="paste">
                  粘贴编号
                </el-button>
                <el-dialog v-model="visible" title="处理状态文本" width="500" center>
                  <el-row :gutter="24">
                    <el-col :span="12">
                      <el-input
                          v-model="messy"
                          autosize
                          type="textarea"
                          placeholder="复制的数据"
                      />
                    </el-col>
                    <el-col :span="12">
                      <el-input
                          v-model="arrange"
                          autosize
                          type="textarea"
                          placeholder="处理的数据"
                      />
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <template #footer>
                    <div class="dialog-footer">
                      <el-button @click="visible = false">取消</el-button>
                      <el-button type="primary" @click="ConfirmSm">
                        确定
                      </el-button>
                    </div>
                  </template>
                </el-dialog>
              </el-col>
              <el-col :span="1"></el-col>
              <el-col v-if="false" :span="1">
                <el-button type="primary" plain @click="pasteNum">
                  粘贴数量
                </el-button>
                <el-dialog v-model="visibleNum" title="批量处理数量" width="500" center>
                  <el-row :gutter="24">
                    <el-col :span="12">
                      <el-input
                          v-model="messyNum"
                          autosize
                          type="textarea"
                          placeholder="复制的数量"
                      />
                    </el-col>
                    <el-col :span="12">
                      <el-input
                          v-model="arrangeNum"
                          autosize
                          type="textarea"
                          placeholder="处理的数量"
                      />
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <template #footer>
                    <div class="dialog-footer">
                      <el-button @click="visibleNum = false">取消</el-button>
                      <el-button type="primary" @click="ConfirmSmNum">
                        确定
                      </el-button>
                    </div>
                  </template>
                </el-dialog>
              </el-col>
              <el-col :span="1"></el-col>
            </el-row>
          </div>
        </div>
        <!-- <div class="table-foot">
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item label="到货数量总计：" prop="fOrgCategory">
                  <el-input disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div> -->
      </el-carousel-item>
      <el-carousel-item>
        <div class="from2">
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="客户名称：" prop="fOrgCategory">
                  <el-select @change="fillCustomerName" style="width: 100%" filterable
                             v-model="from.selectInf.customerName">
                    <el-option v-for="item in data.allUserList" :key="item.code" :label="item.code"
                               :value="item.name"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="订单编号：" prop="fOrgCategory">
                  <el-input v-model="from.selectInf.orderNumber"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="物流单号：" prop="fOrgCategory">
                  <el-input v-model="from.selectInf.logisticsCode"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="经办人：" prop="fOrgCategory">
                  <el-input v-model="from.selectInf.handlerPeople"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="开始日期：" prop="fOrgCategory">
                  <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="from.selectInf.startTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="结束日期：" prop="fOrgCategory">
                  <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="from.selectInf.endTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <div style="width:100%;height: 100%;display: flex;justify-content: flex-end;">
                  <el-button type="danger" style="width: 74%;" plain @click="clearSelect">
                    重置
                  </el-button>
                </div>
              </el-col>
              <el-col :span="2">
                <div style="width:100%;height: 100%;display: flex;justify-content: flex-end;">
                  <el-button type="primary" style="width: 74%;" plain @click="selectHis">
                    查询
                  </el-button>
                </div>
              </el-col>
              <el-col :span="2">
                <div style="width:100%;height: 100%;display: flex;justify-content: flex-end;">
                  <Authority permission="ec_so">
                    <el-button type="primary" style="width: 74%;" plain @click="selectExport">
                      导出
                    </el-button>
                  </Authority>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="table2">
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-table :data="data.hisList" border style="width: 100%">
                  <el-table-column align="center" prop="FOrderNumber" label="订单号" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" prop="FCustomerCode" label="客户编号" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" prop="FCustomerName" label="客户名称" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" prop="FHandlerName" label="经办人" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" prop="FLogisticsCode" label="物流单号" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" prop="FOrderDate" label="日期" min-width="120"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column align="center" label="操作" #default="scope" min-width="200">
                    <el-button type="success" @click="editHis(scope.row,'look')">查看</el-button>
                    <Authority permission="so_cfb">
                      <el-button type="warning" @click="editHis(scope.row,'edit')">编辑</el-button>
                    </Authority>
                    <el-button type="danger" @click="delHis(scope)">删除</el-button>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" v-show="from.pageInf.sumPage>0">
                <el-pagination style="margin-top: 20px" layout="total, sizes, prev, pager, next, jumper"
                               :page-size="from.selectInf.size" :total="from.pageInf.sumPage"
                               :current-page="from.selectInf.page"
                               @current-change="pageSelect" @size-change="pageSizeSelect">
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="table-foot">
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="5">
                <el-form-item label="到货数量总计：" prop="fOrgCategory">
                  <el-input disabled/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="footName">
    </div>
    <div class="popUp">
      <el-dialog
          @close="dialogClose"
          title="发货单库存"
          :append-to-body="true"
          :fullscreen="popUpShow.fullScreen"
          v-model="popUpShow.edit" width="50%"
          :draggable="true">
        <div class="select-cont">
          <el-from align="center" label-width="150px">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="客户编号：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FCustomerCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FCustomerName"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货方：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FReceive"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label=" 经  办 人 ： " prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FHandlerName"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经办人电话：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FHandlerPhone"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发 货 日 期 ：" prop="fOrgCategory">
                  <el-date-picker disabled type="datetime"
                                  v-model="from.his.fromData.salesOrderHead.FSendDate"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="物流单号：" prop="fOrgCategory">
                  <el-input :disabled="popUpShow.onlyRead" v-model="from.his.fromData.salesOrderHead.FLogisticsCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物流公司名称：" prop="fOrgCategory">
                  <el-input :disabled="popUpShow.onlyRead" v-model="from.his.fromData.salesOrderHead.FLogisticsName"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货物流：" prop="fOrgCategory">
                  <el-input :disabled="popUpShow.onlyRead" v-model="from.his.fromData.salesOrderHead.FSendLogistics"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="popUpShow.onlyRead" :gutter="10">
              <el-col :span="8">
                <el-form-item label="发货类型 ：" prop="fFulfillmentType">
                  <el-input v-model="from.his.fromData.salesOrderHead.FFulfillmentType" clearable/>
                  <!--                  <el-select-->
                  <!--                      placeholder="请选择发货类型"-->
                  <!--                      v-model="from.his.fromData.salesOrderHead.FFulfillmentType">-->
                  <!--                    <el-option v-for="item in data.deliveryTyp"-->
                  <!--                               :key="item" :label="item"-->
                  <!--                               :value="item"></el-option>-->
                  <!--                  </el-select>-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货地址：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FSendAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货地址：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FReceiveAddress"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-else>
              <el-col :span="8">
                <el-form-item label="发货类型 ：" prop="fFulfillmentType">
                  <el-input v-model="from.his.fromData.salesOrderHead.FFulfillmentType" clearable/>
                  <!--                  <el-select-->
                  <!--                      placeholder="请选择发货类型"-->
                  <!--                      v-model="from.his.fromData.salesOrderHead.FFulfillmentType">-->
                  <!--                    <el-option v-for="item in data.deliveryTyp"-->
                  <!--                               :key="item" :label="item"-->
                  <!--                               :value="item"></el-option>-->
                  <!--                  </el-select>-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货地址：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FSendAddress"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货地址：" prop="fOrgCategory">
                  <el-input disabled v-model="from.his.fromData.salesOrderHead.FReceiveAddress"/>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-button type="primary" plain @click="saleConfirm">
                  确认发货单
                </el-button>
              </el-col>
            </el-row>
          </el-from>
          <el-table
              border
              :row-key="row => row.fId"
              :expand-row-keys="from.his.product.defaultEx"
              @expand-change="expandInv"
              :data="from.his.table"
              style="width: 100%">
            <el-table-column type="expand">
              <template #default="props">
                <el-table
                    v-if="popUpShow.onlyRead"
                    height="40%"
                    :data="from.his.product.productList"
                    border>
                  <el-table-column align="center" label="序号" type="index" width="55"/>
                  <el-table-column align="center" label="条码号" prop="value" width="200"/>
                  <el-table-column label="操作" #default="scope" width="100">
                    <el-button type="danger" @click="deltScan(scope.row)">撤销</el-button>
                  </el-table-column>
                  <!--                  <el-table-column align="center" label="产品编号" prop="fBarCode" min-width="200"/>-->
                  <!--                  <el-table-column align="center" label="产品内码" prop="fId" min-width="200"/>-->
                </el-table>
                <el-table
                    @selection-change="selectStockChange"
                    empty-text="暂无库存"
                    v-else
                    height="40%"
                    :data="from.his.product.stockList"
                    border>
                  <el-table-column type="selection"/>
                  <el-table-column align="center" label="序号" type="index" width="55"/>
                  <el-table-column align="center" label="条码号" prop="value" width="200"/>
                  <el-table-column label="操作" #default="scope" width="100">
                    <el-button type="danger" @click="deltScan(scope.row)">撤销</el-button>
                  </el-table-column>
                  <el-table-column v-if="false" align="center" label="序号" min-width="40" type="index"/>
                  <el-table-column v-if="false" align="center" label="产品编号" min-width="150" prop="barCode"/>
                  <el-table-column v-if="false" align="center" label="物料编号" min-width="100" prop="invCode"/>
                  <el-table-column v-if="false" align="center" label="仓库编号" min-width="50" prop="whCode"/>
                  <el-table-column v-if="false" align="center" label="仓库名称" min-width="150" prop="whName"/>
                  <el-table-column v-if="false" align="center" label="操作" #default="scope" min-width="100">
                    <el-button type="success"
                               @click="outStock(props.row.fInvCode,scope.row.barCode,scope.$index,props.row)">
                      出库
                    </el-button>
                  </el-table-column>
                </el-table>
                <el-row>
                  <el-col>
                    <el-button v-if="from.his.product.selectList.length > 0" if type="primary"
                               @click="outStockSelected(props.row.fInvCode)">出库已选择
                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="fSeqNo" label="序号" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="fInvCode" label="物料编号" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="fInvName" label="物料名称" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="fInvStd" label="物料规格" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="fSendNum" label="发货数" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column align="center" prop="fScanNum" label="已扫描数" min-width="120"
                             :show-overflow-tooltip="true"/>

            <el-table-column v-if="popUpShow.onlyRead && false" align="center" prop="fOrderNumber" label="领充单号"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fContractNumber" label="合同号"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fLogistics" label="物流方式" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fProjectName" label="项目名称"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fElectronFlow" label="电子流"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fSendNotice" label="发货通知人"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="fAccountProcessing" label="账务处理"
                             min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column v-if="popUpShow.onlyRead" align="center" prop="scanCode" label="扫描" min-width="200"
                             :show-overflow-tooltip="true" fixed="right" #default="scope">
              <el-input v-model="scope.row['scanCode']" size="default" @keydown.enter="expandScanInv(scope.row)"/>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
				<span class="dialog-footer">
				  <el-button @click="popUpShow.fullScreen = true">全屏</el-button>
				  <el-button @click="popUpShow.edit = false">取消</el-button>
				</span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import ajax from '../../../../public/JavaScript/api/ajax.js'
import {get_invs} from "@/api/product/product";
import Authority from "@/components/auth/Authority.vue";
import {useRoute} from "vue-router";
import {exportSaleso} from "@/api/product/task";
import * as XLSX from 'xlsx';

const route = useRoute();
const stockTable = ref();
let swip = ref()
let popUpShow = reactive({
  page: false,
  edit: false,
  onlyRead: true,
  fullScreen: false,
})
let data = reactive({
  allUserList: [],
  deliveryTyp: [],
  unitType: [],
  packageType: [],
  userOrderList: [],
  hisList: [],
  ckList: [],
})
let publicData = reactive({
  dbclickData: {}
})

function changeHis() {
  swip.value.setActiveItem(1)
}

function dialogClose() {
  popUpShow.edit = false;
  popUpShow.fullScreen = false;
  from.his.product.defaultEx = []
}

/* 重置查询条件 */
function clearSelect() {
  from.selectInf = {
    "customerCode": "",
    "customerName": "",
    "logisticsCode": "",
    "handlerPeople": "",
    "startTime": undefined,
    "endTime": undefined,
    "page": 1,
    "size": 10,
  }
}

function fillCustomer(item) {
  const arr = item.split("_");
  from.tableHead.salesOrderHead.fCustomerCode = arr[0]
  from.tableHead.salesOrderHead.fCustomerName = arr[1]
}

function fillCustomerName(item) {
  const arr = item.split("_");
  from.tableHead.salesOrderHead.fCustomerCode = arr[0]
  from.tableHead.salesOrderHead.fCustomerName = arr[1]
}

// 中文到英文的键名映射
const keyMapping = {
  "领充单号": "fOrderNumber",
  "合同号": "fContractNumber",
  "客户编码": "fCustomerCode",
  "正能编码": "fInvCode",
  "物料名称": "fInvName",
  "物料规格": "fInvStd",
  "本次发货数": "fSendNum",
  "单位": "fUnit",
  "物流方式": "fLogistics",
  "项目名称": "fProjectName",
  "电子流": "fElectronFlow",
  "备注": "fRemark",
  "发货通知人": "fSendNotice",
  "账务处理": "fAccountProcessing"
};
const uploadRef = ref();
const handleHttpUpload = async (param) => {
  const file = param.file;
  const reader = new FileReader();
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {type: "array"});
    const sheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[sheetName];
    // excel原始数据
    let outData = XLSX.utils.sheet_to_json(sheet, {header: 1});
    let arr = arrayChangeObject(outData);
    for (const a of arr) {
      const res = await get_invs([a['正能编码'] + ""]);
      if (res.length > 0) {
        a['正能编码'] = res[0]['invCode'];
        a['物料名称'] = res[0]['invName'];
        a['物料规格'] = res[0]['invStd'];
        a['单位'] = res[0]['unit'];
      }
    }
    from.tableHead.salesOrderVos = translateArrayKeys(arr);
    from.tableHead.salesOrderVos.forEach((item, index) => {
      item.Sort = index + 1;
      item.fCustomerCode = item.fCustomerCode + "";
    })
  }
  reader.readAsArrayBuffer(file);
};

// 转换单个对象的键名
function translateKeys(obj) {
  const newObj = {};
  for (const [chineseKey, value] of Object.entries(obj)) {
    const englishKey = keyMapping[chineseKey] || chineseKey;
    newObj[englishKey] = value;
  }
  return newObj;
}

// 转换整个数组
function translateArrayKeys(arr) {
  return arr.map(item => translateKeys(item));
}

const arrayChangeObject = (array) => {
  // 直接通过map返回最新数组
  return array.slice(1).map((item) => {
    const keys = array[0];
    const obj = {};
    for (let i = 0; i < keys.length; i++) {
      obj[keys[i]] = item[i] || "";
    }
    obj.fScanNum = 0;
    // 返回当前对象
    return obj;
  });
};

const expandInvRow = ref();

function expandScanInv(row) {
  console.log(row)
  console.log(editHisData.value)
  ajax.post('/soc/sp', {
        body: {
          fSaleOrderCode: editHisData.value['FOrderNumber'],
          fSeqNo: row.fSeqNo,
          fBarCode: row['scanCode'],
        },
      },
      res => {
        if (res.code === 200) {
          // from.his.product.productList = res.data
          // selectHis();
          ajax.post('/so/od?order=' + editHisData.value['FOrderNumber'], {
            body: {}
          }, res => {
            if (res.code === 200) {
              from.his.table = res.data
            } else {
              ElMessage.error(res.msg)
            }
          }, err => {
            ElMessage.error('服务器错误')
          })
        } else {
          ElMessage.error(res.msg || '系统错误')
        }
      }, err => {
        ElMessage.error(err.msg || '服务器错误')
      })
}

const expandRow = ref();
const expandEx = ref();

function expandInv(row, ex) {
  console.log(row, ex)
  expandRow.value = row;
  expandEx.value = ex;
  if (ex.length !== 0) {
    from.his.product.defaultEx[0] = row.fId
    if (popUpShow.onlyRead) {
      // ajax.post('/so/odb?orderDetailId=' + (row.fId), {
      ajax.post('/so/odb', {
            body: {
              fSaleOrderCode: editHisData.value['FOrderNumber'],
              fSeqNo: row.fSeqNo,
              fBarCode: "",
            },
          },
          res => {
            if (res.code === 200) {
              from.his.product.productList = res.data
            } else {
              ElMessage.error(res.msg || '系统错误')
            }
          }, err => {
            ElMessage.error(err.msg || '服务器错误')
          })
    } else {
      invStock(row.fInvCode)
    }
  } else from.his.product.defaultEx = []
}

function invStock(invCode) {
  ajax.post('/so/stock?invCode=' + invCode, {},
      res => {
        if (res.code === 200) {
          from.his.product.stockList = res.data
        } else {
          ElMessage.error(res.msg || '系统错误')
        }
      }, err => {
        ElMessage.error(err.msg || '服务器错误')
      })
}

const editHisData = ref();

/* 打开编辑历史弹窗 */
function editHis(row, op) {
  editHisData.value = row
  popUpShow.onlyRead = op === 'look'
  ajax.post('/so/od?order=' + row.FOrderNumber, {
    body: {}
  }, res => {
    if (res.code === 200) {
      from.his.fromData.salesOrderHead = row
      from.his.table = res.data
      popUpShow.edit = true
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器错误')
  })
}


function selectStockChange(select) {
  from.his.product.selectList = select.map(data => data.barCode);
}

/**
 * 出库已选择
 */
function outStockSelected(invCode) {
  ajax.post('/so/cfb', {
    body: {
      orderNumber: from.his.fromData.salesOrderHead.FOrderNumber,
      invCode: invCode,
      bar: from.his.product.selectList
    }
  }, res => {
    if (res.code === 200) {
      ElMessage.success('产品出库成功！')
      editHis(from.his.fromData.salesOrderHead, 'edit')
      invStock(invCode)
      from.his.product.selectList = []
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器错误')
  })
}

/**
 * 出库
 */
function outStock(invCode, barCode, index, pr) {
  ajax.post('/so/cfb', {
    body: {
      orderNumber: from.his.fromData.salesOrderHead.FOrderNumber,
      invCode: invCode,
      bar: [barCode]
    }
  }, res => {
    if (res.code === 200) {
      ElMessage.success('产品出库成功！')
      editHis(from.his.fromData.salesOrderHead, 'edit')
      invStock(invCode)
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器错误')
  })
}

/**
 * 确认发货通知单
 */
function saleConfirm() {
  ajax.post('/so/update', {
    body: {
      fId: from.his.fromData.salesOrderHead.FId,
      fLogisticsCode: from.his.fromData.salesOrderHead.FLogisticsCode,
      fLogisticsName: from.his.fromData.salesOrderHead.FLogisticsName,
      fSendLogistics: from.his.fromData.salesOrderHead.FSendLogistics,
    }
  }, res => {
    if (res.code === 200) {
      ElMessage.success('发货通知单确认成功')
      popUpShow.edit = false
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器错误')
  })
}

/* 删除历史发货 */
function delHis(ev) {
  ElMessageBox.confirm(
      '是否确认删除?',
      '警告',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'error',
      }
  ).then(() => {
    ajax.post('/so/de?fId=' + ev.row.FId, {body: {}}, res => {
      if (res.code === 200) {
        ElMessage.success('删除成功')
        data.hisList.splice(ev.$index, 1)
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}

/* 保存订单信息 */
function confirmOrder() {
  // console.log(from.tableHead.salesOrderVos);
  // console.log(from.tableHead.salesOrderHead);
  // return
  ajax.post('/so/save', {
    body: {
      saleBil: from.tableHead.salesOrderVos,
      sale: from.tableHead.salesOrderHead
    }
  }, res => {
    if (res.code === 200) {
      from.tableHead.salesOrderVos = []
      uploadRef.value?.clearFiles();
      ElMessage.success('提交成功')
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器错误')
  })
}

/* 删除列表 */
function delt(ev) {
  from.tableHead.salesOrderVos.splice(ev.$index, 1)
}

function deltScan(row) {
  ajax.post('/so/cancel', {
    body: {
      fSaleOrderCode: editHisData.value['FOrderNumber'],
      fSeqNo: expandRow.value.fSeqNo,
      fBarCode: row['value'],
    },
  }, res => {
    if (res.code === 200) {
      ElMessage.success(' 撤销成功')
      expandInv(expandRow.value, expandEx.value);
      ajax.post('/so/od?order=' + editHisData.value['FOrderNumber'], {
        body: {}
      }, res => {
        if (res.code === 200) {
          from.his.table = res.data
        } else {
          ElMessage.error(res.msg)
        }
      }, err => {
        ElMessage.error('服务器错误')
      })
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('系统错误')
  })
}


/* 查询历史发货信息 */
function selectHis(ev) {
  ajax.post('/so/page', {
    body: from.selectInf
  }, res => {
    if (res.code === 200) {
      ElMessage.success('查询成功')
      from.pageInf.sumPage = res.data.totalCount
      data.hisList = res.data.list
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('系统错误')
  })
}

/* 导出历史发货信息 */
function selectExport() {
  exportSaleso(from.selectInf).then(res => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel,charset=UTF-8",
    });
    const link = document.createElement("a");
    // link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    // 获取文件名
    link.download = "历史销售单.xlsx";
    document.body.appendChild(link);
    link.click(); //会触发a标签的href
    link.remove(); // 一次性的，用完就删除a标签
    ElMessage.success("导出成功");
  });
}


/* 分页查询 */
function pageSelect(ev) {
  from.selectInf.page = ev
  selectHis()
}

function pageSizeSelect(ev) {
  from.selectInf.size = ev
  selectHis()
}

let from = reactive({
  select: '',
  tableHead: {
    "salesOrderHead": {
      "fCustomerName": "",
      "fCustomerCode": "",
      "fReceive": "",
      "fHandlerName": "",
      "fHandlerPhone": "",
      "fSendDate": "",
      "fSendAddress": "",
      "fReceiveAddress": "",
      "fFulfillmentType": "",
      "fLogisticsCode": "",
      "fLogisticsName": "",
      "fSendLogistics": ""
    },
    "salesOrderVos": []
  },
  selectInf: {
    "customerCode": "",
    "customerName": "",
    "logisticsCode": "",
    "handlerPeople": "",
    "startTime": undefined,
    "endTime": undefined,
    "page": 1,
    "size": 10,
  },
  pageInf: {
    pageSize: 10,
    page: 1,
    sumPage: 0
  },
  his: {
    khNum: '',
    fromData: {
      "salesOrderHead": {
        "fOrderNumber": "",
        "fCustomerName": "",
        "fCustomerCode": "",
        "fReceive": "",
        "fHandlerName": "",
        "fHandlerPhone": "",
        "fSendDate": "",
        "fSendAddress": "",
        "fReceiveAddress": "",
        "fLogisticsCode": "",
        "fLogisticsName": "",
        "fSendLogistics": ""
      },
      "salesOrderVos": []
    },
    table: [],
    product: {
      look: true,
      defaultEx: [],
      productList: [],
      stockList: [],
      selectList: []
    }
  }
})
onMounted(() => {
  /* 获取所有客户信息 */
  ajax.post('/so/gc', {
    body: {}
  }, res => {
    console.log('获取所有客户信息：', res)
    if (res.code == 200) {
      data.allUserList = res.data
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error('服务器异常')
  })

  ajax.post('/pag/gr', {
    body: {}
  }, res => {
    data.ckList = res.data
  })

  // 获取字典信息
  ajax.post("/common/dict?name=发货类型", {}, res => {
    data.deliveryTyp = res.data
  })
  // 获取字典信息
  ajax.post("/common/dict?name=销售-单位", {}, res => {
    data.unitType = res.data
  })
  // 获取字典信息
  ajax.post("/common/dict?name=销售-包装方式", {}, res => {
    data.packageType = res.data
  })
})

function add() {
  swip.value.setActiveItem(0)
}

function SM_wlbh(ev) {
  if (ev.row.fInvCode.length > 0) {
    ajax.post('/so/inv?invCode=' + (ev.row.fInvCode), {},
        res => {
          if (res.code === 200) {
            ElMessage.success('查询成功')
            from.tableHead.salesOrderVos[ev.$index] = {
              fInvCode: ev.row.fInvCode,
              fInvName: (res.data?.invName || ''),
              fInvStd: (res.data?.invStd || ''),
              fScanNum: 0
            }
          } else {
            ElMessage.error(res.msg || '系统错误')
          }
        }, err => {
          ElMessage.error(err.msg || '服务器错误')
        })
  } else {
    ElMessage.error('物料编码不能为空')
  }
}

function sm_mates(ev) {
  get_invs(ev).then(res => {
    let result = [];
    for (let i = 0; i < res.length; i++) {
      result.push({
        fInvCode: res[i].invCode,
        fInvName: (res[i]?.invName || ''),
        fInvStd: (res[i]?.invStd || ''),
        fScanNum: 0
      });
    }
    from.tableHead.salesOrderVos = result;
  }, err => {
    ElMessage.error(err.msg || '服务器错误')
  })
}

/* ============== */
// 8108010009 4728070004 8121500290 8121150100
const visible = ref(false);
const messy = ref("");
const arrEv = ref("");
const arrange = ref("");
const paste = () => {
  visible.value = true;
};
watch(messy, () => {
  arrEv.value = messy.value.split(/\s/)?.filter(data => data.trim() !== '');
  for (let i = 0; i < arrEv.value.length; i++) {
    arrange.value += arrEv.value[i] + '\n';
  }
}, {deep: true});
const ConfirmSm = () => {
  visible.value = false;
  sm_mates(arrEv.value);
  messy.value = '';
  arrEv.value = '';
  arrange.value = '';
};
// ================== //
const visibleNum = ref(false);
const messyNum = ref("");
const arrEvNum = ref("");
const arrangeNum = ref("");
const pasteNum = () => {
  visibleNum.value = true;
};
watch(messyNum, () => {
  arrEvNum.value = messyNum.value.split(/\s/)?.filter(data => data.trim() !== '');
  for (let i = 0; i < arrEvNum.value.length; i++) {
    arrangeNum.value += arrEvNum.value[i] + '\n';
  }
}, {deep: true});
// 确认
const ConfirmSmNum = () => {
  visibleNum.value = false;
  for (let index = 0; index < from.tableHead.salesOrderVos.length; index++) {
    from.tableHead.salesOrderVos[index].fSendNum = arrEvNum.value[index];
  }
  messyNum.value = "";
  arrEvNum.value = "";
  arrangeNum.value = "";
};
</script>

<style lang="less" scoped>
@import url("./NoticeOfShipment.less");
</style>
